<template>
  <div>
    <el-card>
      <el-descriptions class="margin-top" title="房屋发布" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="addboxs" size="small">发布</el-button>
        </template>
      </el-descriptions>
    </el-card>
    <div class="lie" v-for="item in houserList.records" :key="item.id">
      
        <div class="table">
          <router-link style="color:black;" :to="{ path: '/xq', query: { id: item.id } }">
          <el-image style="width: 160px; height: 150px; float: left;" :src="item.hlogo"></el-image>
          <div>
            <table>
              <tr>
                <td>详细地址:</td><td>{{item.haddress}}</td>
              </tr>
              <tr>
                <td>房屋户型:</td><td>{{item.roomNum}}</td>
              </tr>
              <tr>
                <td>出租形式:</td><td>{{item.rentingType}}</td>
              </tr>
              <tr>
                <td>付款方式:</td><td>{{item.payType}}</td>
              </tr>
              <tr>
                <td>面积:</td><td>{{item.hproportion}}平</td>
              </tr>
              <tr>
                <td>创建时间:</td><td>{{item.htime}}</td>
              </tr>
            </table>
          </div>
          </router-link>
        </div>
      <div class="btn">
          <el-button  @click="showEdit(item)" size="mini" type="primary" plain icon="el-icon-edit"></el-button><br>
          <el-button @click="showDel(item.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button><br>
           <el-button type="primary" @click="imgadd(item.id)" size="mini">增加房屋图片</el-button><br>
           <router-link :to="{ path: '/himg', query: { id: item.id } }">
           <el-button type="primary"  size="mini">查看房屋图片</el-button><br>
            </router-link>
      </div>
    </div>
    <div>
       <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="page.pageNum" :page-sizes="[3,5, 10, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
    </div>
    <!-- 新增框  -->
     <el-dialog title="新增房屋" :append-to-body="true" :visible.sync="addbox">
      <el-form>
        <el-form-item label="地址" >
            <el-select v-model="addForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="详细地址" >
           <el-input v-model="addForm.haddress"></el-input>
        </el-form-item>
        <el-form-item label="户型" >
           <el-input v-model="addForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="出租形式" >
           <el-select v-model="addForm.rentingType" placeholder="请选择">
             <el-option label="整租" value="整租"></el-option>
             <el-option label="合租" value="合租"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="付款方式" >
           <el-select v-model="addForm.payType" placeholder="请选择">
             <el-option label="面议" value="面议"></el-option>
             <el-option label="押一付一" value="押一付一"></el-option>
             <el-option label="押一付二" value="押一付二"></el-option>
             <el-option label="押一付三" value="押一付三"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋面积" >
           <el-input v-model="addForm.hproportion"></el-input>
        </el-form-item>
        <el-form-item label="入住价格" >
           <el-input v-model="addForm.hprice"></el-input>
        </el-form-item>
        <el-form-item label="房屋头像" >
           <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
           </el-upload>
        </el-form-item>
        <el-form-item label="房屋描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addForm.hdesc"></el-input>
        </el-form-item>
        <el-form-item label="家具">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.furnitureName}}</el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addHouser" type="primary">确 定</el-button>
      </div>
      </el-dialog>
      <!-- 新增房屋图片框  -->
     <el-dialog title="新增房屋图片" :append-to-body="true" :visible.sync="imgaddbox">
      <el-form  >
        <el-form-item label="房屋图片" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="imghandleRemove" :http-request="imgcustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="房屋id" >
          <el-input v-model="imginfoAdd.hid"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="imgaddbox=false">取 消</el-button>
         <el-button @click="addImg" type="primary">确 定</el-button>
      </div>
      </el-dialog>
       <!-- 修改框  -->
     <el-dialog title="修改客户信息" :append-to-body="true" :visible.sync="editbox">
      <el-form  >
        <el-form-item label="地址" >
            <el-select v-model="updForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="详细地址" >
           <el-input v-model="updForm.haddress"></el-input>
        </el-form-item>
        <el-form-item label="户型" >
           <el-input v-model="updForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="出租形式" >
           <el-select v-model="updForm.rentingType" placeholder="请选择">
             <el-option label="整租" value="整租"></el-option>
             <el-option label="合租" value="合租"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="付款方式" >
           <el-select v-model="updForm.payType" placeholder="请选择">
             <el-option label="面议" value="面议"></el-option>
             <el-option label="押一付一" value="押一付一"></el-option>
             <el-option label="押一付二" value="押一付二"></el-option>
             <el-option label="押一付三" value="押一付三"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋面积" >
           <el-input v-model="updForm.hproportion"></el-input>
        </el-form-item>
        <el-form-item label="入住价格" >
           <el-input v-model="updForm.hprice"></el-input>
        </el-form-item>
        <el-form-item label="房屋头像" >
           <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="updhandleRemove" :http-request="updcustomUpload">
            <i class="el-icon-plus"></i>
           </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="房屋描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="updForm.hdesc"></el-input>
        </el-form-item>
        <el-form-item label="家具">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.furnitureName}}</el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="update" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      houserList: [],
       total:0,
       page:{
        pageNum:1,
        pageSize:3
        },
      editbox: false,  //显示修改框
      addbox: false ,  //显示新增框
      imgaddbox:false, //显示新增图片框
      // 添加数据
      addForm:{
      haddress:'',
      roomNum:'',
      rentingType:'',
      payType:'',
      hproportion:'',
      htime:'',
      hprice:'',
      cid:0,
      hdesc:'',
      aid:'',
      hrecommend:0,
      furnitures:'',
      },
      // 修改数据
      updForm:{
      },
      // 图片数据
      updfile:null,
      addfile:null,
      //原图片
      previewImage:null,
      // 获取客户id
      // clientList:[],
     // 获取地址
     AreaList:[],
     //家具
     checkAll: false,
     checkedCities: [], // 保存的家具id
     cities: [], // 家具数据
     isIndeterminate: true,
     haddress:"",
     // 获取房屋图片
     imginfoAdd:{
        file:[],
        hid:''
      },
    };
  },
  created() {
    this.getHouserList();
  },
  methods: {
     // 删除
       async showDel(id){
            let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(err=>err);
            if(ok!='confirm'){
              return this.$message.info('你取消了删除')
            }
            let ret=await this.$http.delete(`/admin/houserInfo/delete/${id}`);
            if(ret.code != 200){
              return this.$message.error(ret.message )
            }
            this.$message.success(ret.message);
            this.getHouserList()
        },
    //更新
        async update(){
         this.updForm.furnitures=this.checkedCities.join('_');
         this.updForm.htime=null;
            let formData=new FormData;
            formData.append('file',this.updfile);
            formData.append('hoinfo',JSON.stringify(this.updForm));
            let ret=await this.$http.put('/admin/houserInfo/update',formData);
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.$refs['mYupload'].clearFiles();
            this.editbox=false;
            this.getHouserList();
            console.log(this.checkedCities);
        },
        async showEdit(row){
            this.editbox=true;
            this.updForm=row;
            this.previewImage=row.hlogo
            this.checkedCities=row.furnitures.split('_').map(Number);
            //获取地址
            let ret=await this.$http.get('/admin/areaInfo/selectAll');
            this.AreaList=ret.data;
            this.updForm.cid=row.cid;
            let fu=await this.$http.get('/admin/fuinfo/selectAll');
            this.cities=fu.data;
        },
        updcustomUpload(file){this.updfile=file.file},
        updhandleRemove(){this.updfile=null},
        //添加房屋图片
    async addImg(){
      const formData = new FormData();
      this.imginfoAdd.file.forEach((file) => {
        formData.append("file", file); // 使用相同的键名 "file"
      });
      formData.append("hid", this.imginfoAdd.hid);
      let ret = await this.$http.post('/admin/imginfo/upload',formData);
      this.$refs['mYupload'].clearFiles();
      this.updfile=null;
      this.imgaddbox=false;
      if(ret.code != 200){
           return this.$message.error(ret.message)
      }
      this.$message.success(ret.message)
      this.getHouserList();
    },
    imgadd(id){
      this.imgaddbox=true;
      this.imginfoAdd.hid=id;
    },
    // 删除图片
    imghandleRemove(file, fileList) {
      console.log(this.file);
    },
    //获取房屋图片
    imgcustomUpload(file){
      this.imginfoAdd.file.push(file.file);
    },
        // 增加
        async addHouser(){
         this.addForm.furnitures=this.checkedCities.join('_');
            let formData=new FormData;
            formData.append('file',this.addfile);
            formData.append('hoinfo',JSON.stringify(this.addForm));
            let ret=await this.$http.post('/admin/houserInfo/add',formData);
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.$refs['mYupload'].clearFiles();
            this.addbox=false;
            this.getHouserList();
        },
        async addboxs(){
            this.addbox=true;
            //获取地址
            let ret=await this.$http.get('/admin/areaInfo/selectAll');
            this.AreaList=ret.data;
            console.log(ret);
            let id = this.$route.query.id;
            this.addForm.cid=id;
            let fu=await this.$http.get('/admin/fuinfo/selectAll');
            console.log(fu);
            this.cities=fu.data;
        },
        //获取图片
        customUpload(file){this.addfile=file.file},
        handleRemove(file,fileList){addfile=null},
        
    handleCheckAllChange(val) {
      // 当全选时，我们需要将所有城市的id添加到checkedCities数组中
      this.checkedCities = val ? this.cities.map(city => city.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // 更新checkedCities数组，确保它包含的是被选中城市的id
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    async getHouserList() {
      let id = this.$route.query.id;
      let ret = await this.$http.get(`/qiantai/my/bycid/${id}`,{params: this.page});
      this.houserList = ret.data;
      this.total=ret.data.total;
      console.log(ret);
     this.houserList.records.forEach(item => {
        item.htime = new Date(item.htime).toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        });
      });
    },
    handleSizeChange(size){
        //  console.log('变化每页条数',size);
         this.page.pageSize = size 
         this.getHouserList();  //刷新
      },
      handleCurrentChange(p){
        //  console.log('变化页码',p);
         this.page.pageNum = p 
         this.getHouserList();  //刷新
      },
  },
};
</script>

<style lang="less" scoped>
.lie {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table {
  height: 150px;
  padding-left: 15px;
  flex: 1;
}

.el-image {
  margin-right: 20px; /* 添加右边距 */
}

.btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 15px; /* 添加右边距 */
}

</style>
